<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/include/taglibs.jsp"%>
<%@ include file="/include/meta.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/plug/jtopo/topotools/css/menu.css"/>
<script src="${ctx}/plug/jtopo/topotools/require/jtopo-0.4.8-min.js"></script>
<script src="${ctx}/plug/jtopo/topotools/require/Map.js"></script>
<script src="${ctx}/plug/jtopo/topotools/require/Math.uuid.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core3.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core2.js"></script>

<link rel="Stylesheet" type="text/css" href="${ctx}/plug/jpicker-1.1.6/css/jPicker-1.1.6.css" />
<link rel="Stylesheet" type="text/css" href="${ctx}/plug/jpicker-1.1.6/jPicker.css" />
<script src="${ctx}/plug/jpicker-1.1.6/jpicker-1.1.6.js" type="text/javascript"></script>
<style type="text/css">
.EventLeft{width:60px;height:100%;float:left;border:1px solid #d4d4d4;}
.EventRight{width:290px;height:100%;float:left;border:1px solid #d4d4d4;margin-left:1px;}
.eventlist{height:30px;line-height:30px;border-bottom:1px solid #d4d4d4;}
.EventLeft ul{margin:0px;padding:0px;}
.EventLeft ul li{height:20px;line-height:20px;list-style:none;text-align:center;cursor:pointer;*cursor:hand;}
.eventRItem{height:30px;line-height:30px;border-bottom:1px solid #d4d4d4;}
</style>
<script>
	var flag=0;
    $(document).ready(function () {
    	$.fn.jPicker.defaults.images.clientPath='${ctx}/plug/jpicker-1.1.6/images/';
    	$("#colorMain").jPicker({window:{title:'颜色选择器'}});
        var canvas =document.getElementById('canvas__');
        stage = new JTopo.Stage(canvas);
        scene = new JTopo.Scene();
        scene.background = '${ctx}/plug/jtopo/topotools/images/bg21.jpg';
        stage.add(scene);
        scene.mode = 'select';
        scene.areaSelect = false;
        initDBClick();
        initRightButton();
        getjson();
        getFieldJson();
        getjseventCom();
    });
    function getjson(){
    	var setData={};
    	if(getQueryString("proid")!=null){
    		flag=1;
    		setData["id"]=getQueryString("proid");
	    	data('${ctx}'+actionUrl('/sys/', 'tsbProjectPage','Get_ById'),setData,'json',function(d){
	    		//alert(JSON.stringify(d));
	    		parent.addParentPage(d);
	    		renderToPo(eval(d.pageContent));
	    	});
    	}else{
    		flag=0;
    	}
    }
    function getQueryString(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return unescape(r[2]); return null;
    } 
    
    function getFieldJson(){
	    data('${ctx}'+actionUrl('/sys/', 'cxSbPoint','ComboBox'),null,'json',function(d){
	    	//alert(JSON.stringify(d));
	    	var option="";
	    	for(var i=0;i<d.length;i++){
	    		option+='<option value="'+d[i].id+'">'+d[i].text+'</option>';
	    	}
	    	$("#bundlingField").html(option);
	    });
    }
    
    function getjseventCom(){
	    data('${ctx}'+actionUrl('/sys/', 'tsbJsDictionaries','ComboBox'),null,'json',function(d){
	    	var option="",list="";
	    	for(var i=0;i<d.length;i++){
	    		option+='<option value="'+d[i].id+'">'+d[i].text+'</option>';
	    		list+='<li>'+d[i].text+'</li>';
	    	}
	    	$(".EventLeft ul").html(list);
	    	$("#eventType").html(option);
	    });
    }
    
    function selectTypeChange(){
    	$("#eventClass").val("customEvent");
    	$("#eventContent").val("");
    }
    
    function selectChange(){
    	var classStr=$("#eventClass").val();
    	if(classStr=="commonEvent"){
    		var setData={};
	    	setData["id"]=$("#eventType").val();
	    	data('${ctx}'+actionUrl('/sys/', 'tsbJsDictionaries','Get_ById'),setData,'json',function(d){
	 	    	$("#eventContent").val(d.jsEventContent);
	 	    });
    	}else{
    		$("#eventContent").val("");
    	}
    }
</script>
</head>
<body>
	<canvas width='1205' height='696' style="border:1px solid #808080" id='canvas__'></canvas>
		<div id="content"></div>
		<textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;"
		          onkeydown="if(event.keyCode==13)this.blur();"></textarea>
		<ul id="contextmenu" style="display:none;font-size:12px">
		    <li><a>开始连线</a></li>
		    <li><a>绑定数据</a></li>
		    <li><a>绑定事件</a></li>
		    <li><a>设置成告警</a></li>
		    <li><a>清除告警</a></li>
		    <li><a>顺时针旋转</a></li>
		    <li><a>逆时针旋转</a></li>
		    <li><a>放大</a></li>
		    <li><a>缩小</a></li>
		    <li><a>删除该节点</a></li>
		</ul>
		
		<ul id="contextmenu2" style="display:none;font-size:12px">
			<li><a>设置线条类型</a></li>
		    <li><a>设置颜色</a></li>
		    <li><a>设置线条宽度</a></li>
		    <li><a>删除连线</a></li>
		</ul>
		
		<div id="jsonContext" style="width:700px;height:700px;display:none;font-size:12px">
		
		</div>
		
		<div id="bundlingData" class="easyui-dialog" title="绑定数据" style="width:200px;height:200px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'Save',
				handler:function(){
					currentNode.field=document.getElementById('bundlingField').value;
					$('#bundlingData').dialog('close');
				}
			}]">
		<div style="width:90%;height:90%;margin:0px auto;">
	    	<div style="margin:10px 0px;">
		    	<label>绑定字段:</label>
		    	<select id="bundlingField">
		    		<option value="id">id</option>
		    	</select>
	    	</div>
    	</div>
    </div>
    
    <div id="bundlingEvent" class="easyui-dialog" title="绑定事件" style="width:400px;height:300px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'保存',
				handler:function(){
				 	
					currentNode.elementEvent=document.getElementById('eventContent').value;
					$('#bundlingEvent').dialog('close');
				}
			}]">
		<div style="width:98%;height:98%;margin:1px auto;">
	    	<div class="EventLeft">
	    		<div class="eventlist">事件列表</div>
	    		<ul>
	    			<li>单击</li>
	    			<li>双击</li>
	    			<li>移入</li>
	    			<li>移出</li>
	    		</ul>
	    	</div>
	    	<div class="EventRight">
	    		<div class="eventRItem">
	    			<label>事件类型</label>
	    			<select id="eventType" onchange="selectTypeChange()">
	    				<option value="click">单击</option>
	    				<option value="dbclick">双击</option>
	    				<option value="mousemove">移入</option>
	    				<option value="mouseout">移出</option>
	    			</select>
	    		</div>
	    		<div class="eventRItem">
	    			<label>事件分类</label>
	    			<select id="eventClass" onchange="selectChange()">
	    				<option value="customEvent">自定义事件</option>
	    				<option value="commonEvent">常用事件</option>
	    			</select>
	    		</div>
	    		<div style="height:155px;">
	    			<textarea  id="eventContent" style="width:98%;height:99%;resize:none;"></textarea>
	    		</div>
	    	</div>
    	</div>
    </div>
    
    <div id="colorcaiter" class="easyui-dialog" title="选择颜色" style="width:600px;height:360px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
		<div id="colorMain" style="width:100%;height:100%;"></div>
    </div>
    <div id="lineMain" class="easyui-dialog" title="设置线条宽度" style="width:200px;height:200px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'Save',
				handler:function(){
					currentNode.lineWidth=document.getElementById('wlineValue').value;
					$('#lineMain').dialog('close');
				}
			}]">
		<div style="width:90%;height:90%;margin:0px auto;">
	    	<div style="margin:10px 0px;">
		    	<label>宽度:</label>
		    	<select id="wlineValue">
		    		<option value="1">1</option>
		    		<option value="2">2</option>
		    		<option value="3">3</option>
		    		<option value="4">4</option>
		    		<option value="5">5</option>
		    		<option value="6">6</option>
		    	</select>
	    	</div>
    	</div>
    </div>
    
    <div id="lineClassMain" class="easyui-dialog" title="设置线条类型" style="width:200px;height:200px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'Save',
				handler:function(){
					
					var str=document.getElementById('lineClassValue').value;
					if(str=='link'){
						currentNode.dashedPattern=null;
					}else if(str=='arrow'){
						currentNode.dashedPattern=5;
					}else if(str=='foldLink1'){
						
					}else if(str=='flexLink1'){
						
					}
					$('#lineClassMain').dialog('close');
				}
			}]">
		<div style="width:90%;height:90%;margin:0px auto;">
	    	<div style="margin:10px 0px;">
		    	<label>线条类型:</label>
		    	<select id="lineClassValue">
		    		<option value="link">直线实线</option>
		    		<option value="arrow">直线虚线</option>
		    		<!-- <option value="foldLink">折线实线</option>
		    		<option value="foldLink1">折线虚线</option>
		    		<option value="flexLink">二次折线实线</option>
		    		<option value="flexLink1">二次折线虚线</option> -->
		    	</select>
	    	</div>
    	</div>
    </div>
</body>
</html>